<template>
    <div>
        <!-- 表格区域 -->
        <div class="table-body">
            <!-- 左上角按钮 -->
            <div class="table-left-top">
                <el-button icon="el-icon-edit" @click="onEditStage">{{ $i18n.t('EDIT_STAGE') }}</el-button>
            </div>

            <!-- 表格 -->
            <el-table border style="width: 100%;" :data="data" v-loading="loading">
                <el-table-column align="center" prop="level_text" :label="$i18n.t('STAGE_NAME')" fixed="left"></el-table-column>
                <el-table-column align="center" prop="overdue_day" :label="$i18n.t('OVERDUE_DAY')"></el-table-column>
                <el-table-column align="center" prop="staff_count" :label="$i18n.t('COLLECTION_STAFF_COUNT')"></el-table-column>
            </el-table>
        </div>

        <fieldset class="fieldSet" style="margin-top: 50px">
            <legend class="legend">{{ $i18n.t('TIP_INFO') }}</legend>
            <div> 1、{{ $i18n.t('STAGE_TIPS_1') }} </div>
            <div> 2、{{ $i18n.t('STAGE_TIPS_2') }} </div>
        </fieldset>

        <!-- 编辑阶段 -->
        <el-drawer
            :title="$i18n.t('EDIT_STAGE')"
            :visible.sync="drawer"
            destroy-on-close
            ref="drawer"
            size="700px"
        >
            <div style="padding: 20px">
                <!-- 表格区域 -->
                <div class="table-body">
                    <!-- 左上角按钮 -->
                    <div class="table-right-top">
                        <el-button type="primary" @click="onSubmit">{{ $i18n.t('SAVE') }}</el-button>
                    </div>
                    <el-table border style="width: 100%;" :data="formData" v-loading="loading">
                        <el-table-column align="center" prop="level_text" :label="$i18n.t('STAGE_NAME')" fixed="left"></el-table-column>
                        <el-table-column align="center" prop="overdue_day" :label="$i18n.t('OVERDUE_DAY')" :min-width="150">
                            <template slot-scope="scope">
                                <el-row :gutter="10" style="text-align: center;">
                                    <el-col :span="10">
                                        <el-form>
                                            <el-form-item
                                                :error="errors[scope.$index] && errors[scope.$index].start_day_error"
                                                :style="errors[scope.$index] && errors[scope.$index].start_day_error ? 'margin-bottom: 25px' : 'margin-bottom: 0'"
                                            >
                                                <el-input
                                                    v-model="scope.row.start_day"
                                                    :placeholder="$i18n.t('PLEASE_INPUT', { value: '' })"
                                                    style="width: 100%"
                                                    :disabled="scope.$index === 0"
                                                    @change="onStartDayChange($event, scope.$index)"
                                                ></el-input>
                                            </el-form-item>
                                        </el-form>
                                    </el-col>
                                    <el-col :span="2">~</el-col>
                                    <el-col :span="10">
                                        <el-form>
                                            <el-form-item
                                                :error="errors[scope.$index] && errors[scope.$index].end_day_error"
                                                :style="errors[scope.$index] && errors[scope.$index].end_day_error ? '' : 'margin-bottom: 0'"
                                            >
                                                <el-input
                                                    v-model="scope.row.end_day"
                                                    :placeholder="$i18n.t('PLEASE_INPUT', { value: '' })"
                                                    :disabled="scope.$index === formData.length - 1"
                                                    style="width: 100%"
                                                    @change="onEndDayChange($event, scope.$index)"
                                                ></el-input>
                                            </el-form-item>
                                        </el-form>
                                    </el-col>
                                </el-row>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" :label="$i18n.t('ACTION')">
                            <template slot-scope="scope">
                                <el-row v-if="formData.length === scope.$index + 1" :gutter="10" style="text-align: center;">
                                    <el-col :span="12">
                                        <el-button icon="el-icon-plus" @click="onAdd(scope.$index)" size="mini" type="primary" plain>{{ $i18n.t('ADD') }}</el-button>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-button
                                            icon="el-icon-delete"
                                            :disabled="scope.row.staff_count > 0"
                                            @click="onDelete(scope.row, scope.$index)"
                                            size="mini" type="danger"
                                            plain
                                        >{{ $i18n.t('DELETE') }}</el-button>
                                    </el-col>
                                </el-row>
                                <span v-else>-</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script>
    import { getCollectionStage, editCollectionStage } from '@/api/collection'

    export default {
        name: 'CollectionStage',
        data () {
            return {
                data: [],
                loading: false,
                drawer: false,
                formData: [],
                errors: {},
                errorMessage: '',
                tipList: [
                    'dsadsadas',
                    'bbb'
                ]
            }
        },
        created () {
            this.fetch()
        },
        methods: {
            // 搜索按钮
            onSearch () {
                this.fetch()
            },
            // 从接口拉取数据
            fetch () {
                this.loading = true
                getCollectionStage().then((res) => {
                    // eslint-disable-next-line camelcase
                    const { result } = res
                    this.data = result
                    this.formData = [].concat(...result)
                    if (this.formData.length === 0) {
                        this.formData.push({
                            level: 1,
                            start_day: 1,
                            end_day: 'n'
                        })
                    }
                }).finally(() => {
                    this.loading = false
                })
            },
            onEditStage () {
                this.drawer = true
            },
            onAdd (index) {
                const end = this.formData[this.formData.length - 1]
                end.end_day = null
                this.formData.push({
                    level: end.level + 1,
                    level_text: 'S' + (end.level + 1),
                    start_day: '',
                    end_day: 'n'
                })
            },
            onDelete (row, index) {
                if (row.staff_count && row.staff_count > 0) {
                    console.log('s')
                }
                this.formData.pop()
                delete this.errors[index]
                this.formData[index - 1].end_day = 'n'
            },
            onStartDayChange (value, index) {
                if (index > 0 && parseInt(value) !== (parseInt(this.formData[index - 1].end_day) + 1)) {
                    this.$set(this.errors, index, {
                        ...this.errors[index],
                        start_day_error: this.$i18n.t('STAGE_FORMAT')
                    })
                } else {
                    this.$set(this.errors, index, {
                        ...this.errors[index],
                        start_day_error: ''
                    })
                }
            },
            onEndDayChange (value, index) {
                if (!value || parseInt(value) < parseInt(this.formData[index].start_day)) {
                    this.$set(this.errors, index, {
                        ...this.errors[index],
                        end_day_error: this.$i18n.t('STAGE_CANNOT_LT_START_DAY')
                    })
                } else {
                    this.$set(this.errors, index, {
                        ...this.errors[index],
                        end_day_error: ''
                    })
                }
            },
            onSubmit () {
                this.formData.forEach((item, index) => {
                    this.onStartDayChange(item.start_day, index)
                    this.onEndDayChange(item.end_day, index)
                })
                for (const item in this.errors) {
                    if (this.errors[item].start_day_error !== '' || this.errors[item].end_day_error !== '') {
                        return false
                    }
                }
                this.loading = true
                this.$store.dispatch('MessageTake', true)
                this.errorMessage = ''
                editCollectionStage({ data: this.formData }).then(() => {
                    this.fetch()
                    this.drawer = false
                    this.$Message.success(this.$i18n.t('HANDLE_SUCCESS'))
                }).catch(error => {
                    // 手动处理错误
                    this.errorMessage = error.message
                }).finally(() => {
                    this.loading = false
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    /deep/ .el-drawer__body {
        overflow: auto;
        padding-bottom: 50px;
        /* overflow-x: auto; */
    }
    .fieldSet {
        font-size: 12px;
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
        border: 1px solid #dddee1;
        margin: 0 2px;
        padding: .35em 1.8em .75em;
        .legend {
            padding: 0 .8rem;
        }
    }
</style>
